<template>
  <div class="playing app-wrapper">
        <!-- <VideoPlayer></VideoPlayer> -->
        <div class="playing-main">
            <div class="playing-summary">
                <h3 class="playing-summary-title">第二届世界互联网大会</h3>
                <p class="playing-summary-other clearfix">239次浏览<a href="#" class="pull-right">活动详情></a></p>
            </div>

            <OwnerMedia 
                :ownerInfo="owner"
                @show-follow-panel="showFollowPanle"
            ></OwnerMedia>

            <div class="recommend-panel panel">
                <div class="recommend-panel-header">
                    <h3 class="recommend-panel-heading">推荐小视频</h3>
                </div>
                <div class="recommend-panel-body">
                    <ul class="video-list">
                        <SmallVideo></SmallVideo>
                        <SmallVideo></SmallVideo>
                        <!-- <li class="video-item media clearfix">
                            <VideoItem></VideoItem>
                            <div class="media-body over-hidden">
                                <h4 class="media-heading">2019-07-12 13:56:09</h4>
                                <p class="media-desc">发布时间：2019-07-12 13:56</p>
                                <p class="meida-secondary">20人次播放</p>   
                            </div>
                        </li> -->
                    </ul>
                </div>
            </div>   
        </div>


    <van-popup 
      position="bottom"
      overlay="false"
      overlay-class="app-masker"
      get-container=".app-wrapper"
      v-model="isShowFollow"
    >
        <div class="follow-panel panel-2vcode text-center">
            <span class="panel-2vcode-close" @click="isShowFollow = false">×</span>
            <div class="panel-header"><i class="oblique-line"></i> 长按关注<a href="#">微光</a>&nbsp;<i class="oblique-line"></i></div>
            <div class="panel-body">
                <img src="./img/2vcode.png" alt="">
                <p>长按关注微信公众号接收最新动态</p>
            </div>
        </div>
    </van-popup>

  </div>
</template>

<script>
import VideoPlayer from '@/components/VideoPlayer.vue';
import SmallVideo from '@/components/SmallVideo.vue';
import OwnerMedia from '@/components/OwnerMedia';
export default {
  components: {
      VideoPlayer,
      SmallVideo,
      OwnerMedia
  },
  props: {},
  data() {
    return {
        owner: {
            name: '名人字画私人订制',
            imgSrc: require('@/assets/img/avatar.jpg'),
            visits: 25000,
            id: 1
        },
        isShowFollow: false
    };
  },
  computed: {},
  methods: {
    showFollowPanle(){
        this.isShowFollow = true;
        //this.$store.dispatch('setMaskerDisplay', true);
    },
    closeFollowPanel(){
        this.isShowFollow = true;
        //this.$store.dispatch('setMaskerDisplay', false); 
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import '@/assets/config.scss';

.playing-summary {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;

    .playing-summary-title {
        font-size: 34px;
        color: #000;
    }

    .playing-summary-other {
        font-size: 24px;
        line-height: 2;
        color: #999;
        > a{
            color: $blue;
        }
    }
}

.playing-main {
  height: calc(100% - 350px);
  padding: 0 35px;
  background-color: #fff;
}

.recommend-panel {
    padding: 0 35px;
    margin-top: 10px;
    background-color: #fff;
    .recommend-panel-heading {
        padding: 20px;
        font-size: 28px;
        color: #2a2a2a;
        line-height: 45px;
        position: relative;
        &::before{
            content: '';
            width: 6px;
            height: 26px;
            background: #1549eb;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate3d(0, -50%, 0);
        }
    }
}

.panel-2vcode {
    background-color: #fff;
    img {
        width: 250px;
        height: 250px;
    }

    .panel-2vcode-close {
        position: absolute;
        top: 30px;
        right: 20px;
        font-size: 48px;
        line-height: 0;

    }

  .panel-header {
    padding: 16px 0;
    font-size: 34px;
    color: #000;
    line-height: 2;

    a { color: $blue; }
    > span {
      padding: 0 36px;
      position: relative;
    } 
  }

  .panel-body {
    padding: 0 0 15px;
    img{ 
      width: 250px;
      height: 250px;
      vertical-align: middle; 
      
    }
    p {
      margin-top: 15px;
      font-size: 24px;
      color: #666;
      line-height: 48px;
    }
  }
}
</style>